
<div class="row contain-user back">
    <div style="margin-top:10%"></div>
  <div class="col-md-2">
    <button routerLink='./articleadd'  routerLinkActive='active' style="margin-bottom:24px" class="btn btn-default">添加文章</button>
    <div class="panel panel-default">
      <div class="panel-heading">分类</div>
      <div class="panel-body" style="font-size:15px">
        <a>转载(3)</a><br/>
        <a>angular(0)</a>
        <br/>
        <a>bootstrap(0)</a>
        <br/>
        <a>jquery(0)</a>
        <br/>
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <div class="Card TopstoryItem">
      <h2 class="ContentItem-title">
        <a href="">网页设计中最常用的字体有哪些？（中文和英文）</a>
      </h2>
      <div class="RichContent is-collapsed">
        <div class="RichContent-inner">
          <span class="RichText CopyrightRichText-richText">我比较熟悉英文，一个一个字体说： Sans-serif Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。Arial: Helvetica的「克隆」，和Helvetica非常…</span>
          <span style="display:none" class="RichText CopyrightRichText-richText">
              作者：Ruoyu Sun<br/>
              链接：https://www.zhihu.com/question/19680724/answer/12867340<br/>
              来源：知乎<br/>
              著作权归作者所有，转载请联系作者获得授权。<br/><br/>
              
              我比较熟悉英文，一个一个字体说：<br/>
              Sans-serif<br/><br/>
              
              1.Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。<br/>
              2.Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常<br/>
              3.Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。<br/>
              4.Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。<br/>
              5.Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。<br/>
              6.Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。<br/><br/>
              
              Serif<br/><br/>
              1.Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。<br/>
              2.Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
              <br/><br/>
              
              中文不熟，抛砖引玉：<br/>
              中易宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。<br/>
              微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。<br/>
              华文细黑：Mac下的默认中文。<br/>
              Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，，当然也有用WenQuanyi Zenhei的，不过比较少了。<br/><br/><br/>
              
              
              CSS3开始支持Embedded font所以英文字体选择一下子多了很多，而中文字体由于文件庞大，仍然就是那几个选。</span>
          
            <button class="btn btn-user" style="color:#175199">展开阅读全文
            <i class="fa fa-arrow-down" aria-hidden="true"></i>
          </button>
        </div>
        <div class="ContentItem-actions">
          <div class="row" style="width:100%">
            <div class="col-md-10">
              <span>
                <i class="fa fa-commenting-o" aria-hidden="true"></i>
                <button class="btn btn-user">23条评论</button>
              </span>
              <span>
                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                <button class="btn btn-user">分享</button>
              </span>
              <span>
                <i class="fa fa-heart-o" aria-hidden="true"></i>
                <button class="btn btn-user">赞</button>
              </span>
            </div>
            <div class="col-md-2">
              <span class="upp">
                <button class="btn btn-user">收起</button>
                <i class="fa fa-arrow-up" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="Card TopstoryItem">
        <h2 class="ContentItem-title">
          <a href="">移动端如何实现自适应所有设备？</a>
        </h2>
        <div class="RichContent is-collapsed">
          <div class="RichContent-inner">
            <span class="RichText CopyrightRichText-richText">
                Mobile的自适应的确是大家关注的一个问题，而实现方案也有多种，他们之间更有所长，各有所短，但总的来说，就是单位的运用： 新一点的有vw,vh,vmax,vminrem，但rem要对html根元素的font-size做一定的处理，而这个处理都是通过js脚本来做，淘宝这方面用得非… 
              </span>
            <span style="display:none" class="RichText CopyrightRichText-richText">
                作者：大漠<br/>
                链接：https://www.zhihu.com/question/31360736/answer/52025310<br/>
                来源：知乎<br/>
                著作权归作者所有，转载请联系作者获得授权。<br/><br/>
                Mobile的自适应的确是大家关注的一个问题，而实现方案也有多种，他们之间更有所长，各有所短，但总的来说，就是单位的运用：
                <br/><br/><br/>
                1.新一点的有vw,vh,vmax,vmin<br/><br/>
                2.rem，但rem要对html根元素的font-size做一定的处理，而这个处理都是通过js脚本来做，淘宝这方面用得非常好，也很成熟<br/><br/>
                3.百分比，这个可能就需要一定的经验<br/><br/>
            </span>
            <button class="btn btn-user" style="color:#175199">展开阅读全文
              <i class="fa fa-arrow-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="ContentItem-actions">
            <div class="row" style="width:100%">
              <div class="col-md-10">
                <span>
                  <i class="fa fa-commenting-o" aria-hidden="true"></i>
                  <button class="btn btn-user">11条评论</button>
                </span>
                <span>
                  <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                  <button class="btn btn-user">分享</button>
                </span>
                <span>
                  <i class="fa fa-heart-o" aria-hidden="true"></i>
                  <button class="btn btn-user">赞</button>
                </span>
              </div>
              <div class="col-md-2">
                <span class="upp">
                  <button class="btn btn-user">收起</button>
                  <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="Card TopstoryItem">
          <h2 class="ContentItem-title">
            <a href="">现在的 CSS、JS 效果和几年前火爆的 Flash 有什么区别？</a>
          </h2>
          <div class="RichContent is-collapsed">
            <div class="RichContent-inner">
              <span class="RichText CopyrightRichText-richText">
                  从技术的角度来说就没区别，区别在于市场 浏览器是一个“可见的长远存在的垄断型产品”，所谓的“垄断”不是指某一家垄断浏览器市场，而是浏览器垄断Web访问这个世界 浏览器发展到现在，经历几轮大战，各公司已经达成了一种微妙的平衡状态，至少表面上非常…    
              </span>
              <span style="display:none" class="RichText CopyrightRichText-richText">
                  作者：张立理<br/>
                  链接：https://www.zhihu.com/question/34089336/answer/58218305<br/>
                  来源：知乎<br/>
                  著作权归作者所有，转载请联系作者获得授权。<br/><br/>
                  
                  从技术的角度来说就没区别，区别在于市场<br/><br/>
                  
                  浏览器是一个“可见的长远存在的垄断型产品”，所谓的“垄断”不是指某一家垄断浏览器市场，而是浏览器垄断Web访问这个世界<br/>
                  浏览器发展到现在，经历几轮大战，各公司已经达成了一种微妙的平衡状态，至少表面上非常友好地合力推进一个被他们称为“标准”的东西<br/>
                  就好像这个世界上有那么5个流氓搞了个什么机构，这5个流氓还非常强大，所以世界会是“整体和平”的。在这种情况下，很难有哪一家突然跳出来说我要完全颠覆人们访问Web的方式，浏览器全都可以去死了，谁要是跳出来分分钟会被按死在地上
                  <br/><br/>
                  而对于Flash，我很哀叹Adobe的不给力和不走运，Flash其实本身并不是一个糟糕的东西，你看：
                  有一套统一而强大的语言，没的说，比那时候的JS强是没问题的<br/>
                  有一套统一方便的API和对象模型，正如浏览器的DOM和BOM<br/>
                  有一个通用的运行时，总之你有一台电脑就能放这东西<br/>
                  有良好的开发工具支撑，无论是Flash还是Flash Builder还是Flex Builder都不错<br/>
                  有面向企业的快速开发体系，Flex不是现在的HTML能去比的<br/>
                  有良好的UI开发模型，这是至今HTML还欠缺的，我甚至不认为Web Components能超越Flex的UI模型<br/>
                  极强大的动画API，动画甚至是作为第一位的对象存在的<br/><br/>
                  问题在于：<br/><br/>
                  1.Adobe这货太不思进取，把运行时搞得这么烂，到处是漏洞能耗又厉害，一碰到移动这种能耗要求高的环境不死才怪<br/><br/>
                  2.Flash的技术和标准由一家掌握，且这家比较小气不打算和大家一起探讨，所以各流氓们只好自己玩别的，玩出来了当然就顺便灭了你这小气鬼好了<br/><br/>
                  所以Flash必然会没落会逐渐消失，而HTML为基准的所谓原生浏览器环境会兴起<br/><br/>
                  
                  当然这一切都没办法去说明Flash从技术上是落后的，哦为免误解，我这里的技术是指Flash的整套体系的设计，而不是其运行时本身。就好像IE6这么烂也不能影响我们的JavaScript是世界第二好语言<br/>
              </span>
              <button class="btn btn-user" style="color:#175199">展开阅读全文
                <i class="fa fa-arrow-down" aria-hidden="true"></i>
              </button>
            </div>
            <div class="ContentItem-actions">
              <div class="row" style="width:100%">
                <div class="col-md-10">
                  <span>
                    <i class="fa fa-commenting-o" aria-hidden="true"></i>
                    <button class="btn btn-user">11条评论</button>
                  </span>
                  <span>
                    <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                    <button class="btn btn-user">分享</button>
                  </span>
                  <span>
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                    <button class="btn btn-user">赞</button>
                  </span>
                </div>
                <div class="col-md-2">
                  <span class="upp">
                    <button class="btn btn-user">收起</button>
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

  </div>

</div>